<template>
  <view class="container">

    <myLoading v-if="isLoading"></myLoading>

    <template v-else>
      <view class="header">
        <text class="title">个人资料设置</text>
      </view>

      <!-- 头像上传区域 -->
      <view class="avatar-container">
        <view class="avatar-wrapper" @click="uploadAvatar">
          <image v-if="formData.avatar" :src="formData.avatar" class="avatar"></image>
          <view v-else class="avatar-placeholder">
            <text class="avatar-upload-text">点击上传头像</text>
          </view>
        </view>
      </view>

      <view class="form-container">
        <view class="form-item">
          <view class="form-label">姓名</view>
          <uni-easyinput v-model="formData.name" placeholder="请输入姓名" class="form-input" />
        </view>

        <view class="form-item">
          <view class="form-label">手机号</view>
          <uni-easyinput v-model="formData.phone" placeholder="请输入手机号" maxlength="11" class="form-input" />
        </view>

        <view class="form-item">
          <view class="form-label">身份证号</view>
          <uni-easyinput v-model="formData.idCard" placeholder="请输入身份证号" maxlength="18" class="form-input" />
        </view>

        <view class="form-item">
          <view class="form-label">初次领取时间</view>
          <picker mode="date" :value="formData.firstReceiveDate || ''" @change="onDateChange" class="custom-date-picker">
            <view>
              <text v-if="formData.firstReceiveDate">{{ formData.firstReceiveDate }}</text>
              <text v-else class="placeholder">请选择日期</text>
            </view>
          </picker>
        </view>

        <view class="form-item">
          <view class="form-label">天数</view>
          <uni-easyinput v-model="formData.dayNum" placeholder="请输入天数" class="form-input" />
        </view>
        
        <view class="form-item">
          <view class="form-label">车牌号</view>
          <uni-easyinput v-model="formData.licensePlate" placeholder="请输入车牌号" maxlength="8" class="form-input" />
        </view>

        <view class="form-item">
          <view class="form-label">零钱</view>
          <uni-easyinput v-model="formData.change" placeholder="请输入零钱金额" type="number" class="form-input" />
        </view>

        <view class="form-item">
          <view class="form-label">口碑值</view>
          <uni-easyinput v-model="formData.reputation" placeholder="请输入口碑值" type="number" class="form-input" />
        </view>

        <view class="form-item">
          <view class="form-label">今日流水</view>
          <uni-easyinput v-model="formData.dailyRevenue" placeholder="请输入今日流水" type="number" class="form-input" />
        </view>

        <view class="form-item">
          <view class="form-label">接单数</view>
          <uni-easyinput v-model="formData.orderCount" placeholder="请输入接单数" type="number" class="form-input" />
        </view>

        <view class="form-item">
          <view class="form-label">在线时长</view>
          <uni-easyinput v-model="formData.onlineHours" placeholder="请输入在线时长(小时)" type="number" class="form-input" />
        </view>

        <view class="button-container">
          <uni-button type="primary" @click="submitForm" class="submit-button">提交</uni-button>
        </view>
      </view>
    </template>


  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        idCard: '',
        firstReceiveDate: '',
        dayNum: '',
        licensePlate: '',
        change: '',
        reputation: '',
        dailyRevenue: '',
        orderCount: '',
        onlineHours: ''
      },
      isLoading: true
    }
  },
  onLoad() {

    // 定义一个0.3-1的随机数
    let randomNum = Math.random() * 0.7 + 0.3;
    // 转换为毫秒
    let randomDelay = randomNum * 1000;
    // 延迟执行
    setTimeout(() => {
      setTimeout(() => {
        this.isLoading = false
      }, randomDelay)
    })


    // 页面加载时，尝试从本地缓存获取数据
    this.loadUserData();
  },
  methods: {
    // 上传头像
    uploadAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];

          // 将图片保存到本地
          uni.saveFile({
            tempFilePath: tempFilePath,
            success: (saveRes) => {
              // 获取保存后的本地路径
              const savedFilePath = saveRes.savedFilePath;
              this.formData.avatar = savedFilePath;

              console.log('头像保存成功，路径：', savedFilePath);

              // 显示成功提示
              uni.showToast({
                title: '头像上传成功',
                icon: 'success'
              });
            },
            fail: (err) => {
              console.error('头像保存失败:', err);
              uni.showToast({
                title: '头像保存失败',
                icon: 'none'
              });
            }
          });
        },
        fail: (err) => {
          console.error('选择图片失败:', err);
        }
      });
    },

    // 加载用户数据
    loadUserData() {
      try {
        const userData = uni.getStorageSync('userInfo');
        if (userData) {
          const parsedData = JSON.parse(userData);
          this.formData = parsedData;
          console.log('成功加载本地存储的数据:', parsedData);
        }
      } catch (error) {
        console.error('加载本地存储数据失败:', error);
      }
    },

    // 提交表单
    submitForm() {
      // 保存数据到本地
      try {
        uni.setStorageSync('userInfo', JSON.stringify(this.formData));
        console.log('成功保存用户数据:', this.formData);

        // 显示成功提示
        uni.showToast({
          title: '保存成功',
          icon: 'success',
          complete: () => {
            // 返回上一页
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          }
        });
      } catch (error) {
        console.error('保存数据失败:', error);
        uni.showToast({
          title: '保存失败，请重试',
          icon: 'none'
        });
      }
    },

    // 处理日期选择变化
    onDateChange(e) {
      this.formData.firstReceiveDate = e.detail.value;
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 0 30rpx 30rpx;
}

.header {
  background-color: #ffffff;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.avatar-container {
  background-color: #ffffff;
  padding: 30rpx;
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.avatar-wrapper {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 100%;
  height: 100%;
}

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-upload-text {
  font-size: 24rpx;
  color: #999999;
  text-align: center;
}

.form-container {
  background-color: #ffffff;
  padding: 0 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  width: 150rpx;
  font-size: 28rpx;
  color: #333333;
}

.form-input {
  flex: 1;
}

.custom-date-picker {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
  cursor: pointer;
  min-height: 44rpx;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.placeholder {
  color: #999999;
}



.button-container {
  padding: 40rpx 20rpx;
}

.submit-button {
  font-size: 28rpx;
}
</style>
